<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举报虚假房源</title>

    <!--  导航CSS样式导入 -->
    <!-- 导航 -->
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">

    <!-- 正文 -->
    <link rel="stylesheet" th:href="@{/airent/css/report.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet"
          th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">

    <!-- 底部 -->
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script th:src="@{/airent/js/vue.js}"></script>

    <style>
        .error {
            color: red;
        }
    </style>

</head>
<body>


<!-- 导航栏 引入topBar -->
<div th:replace="~{head/topBar::topBar}"></div>

<!--  正文  -->
<div class="container" id="myReport">
    <div>
        <h2>举报不符合社会主义核心价值观的帖子</h2>
        <p>我们承诺不会泄露举报人的用户信息
        <p>
    </div>

    <hr>
    <div class="form-group">
        <input type="text" class="form-control" name="articleId" style="display: none">
    </div>

    <div class="form-group">
        <label>请说明举报的原因，帮助我们更好的去了解:</label>
        <textarea class="form-control" rows="5" v-model="reportContent"></textarea>
    </div>


    <div class="mt-3">
        <input type="button" id="submit" class="submit btn btn-default btn-lg btn-block" value="提交反馈"
               @click="addReport()">
        <!--<button id="submit" th:onclick="addReport" class="submit btn btn-default btn-lg btn-block" >提交反馈</button>-->
    </div>
    </form>

</div>

<!-- 引入底部Bar -->
<div th:replace="~{food/bottombar::topBar}"></div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>

<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>


<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script th:src="@{/airent/js/jquery.validate.min.js}"></script>

<script th:inline="javascript">
    let vueApp = new Vue({
        el: "#myReport",
        data: {
            userId: [[${session.user.userId}]],
            articleId: [[${param.articleId}]],
            reportContent: "",
        },
        methods: {
            addReport: function () {
                let imgPath = vueApp.imgPath;
                let url = "/article/reported";
                let data = {
                    articleId: this.articleId[0],
                    userId: this.userId,
                    reportContent: this.reportContent
                }
                $.post(url, data, function (result) {
                    alert(result)
                    if (result == 'success') {
                        window.location.href = '/article.html'
                    }
                })
            }
        },
    })
</script>


</body>
</html>
